<template>
  <a
    :href="url"
    :download="name"
    :style="style"
  >{{title}}</a>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    url: {
      type: String,
      required: true
    },
    name: {
      type: [Number, String],
      default: ''
    },
    title: {
      type: [Number, String],
      default: ''
    },
    color: {
      type: String,
      default: '#409eff'
    },
    decoration: {
      type: Boolean,
      default: true
    },
    size: {
      type: [Number, String],
      default: 10
    }
  },
  setup(props) {
    const style = {
      color: props.color,
      textDecoration: props.decoration ? 'underline' : 'none',
      fontSize: props.size + 'px'
    }
    return {
      style
    }
  },
})
</script>
